$transition: 0.3s;
$width: 100px;
$height: 100px;
$icon-margin: 20px;
$per-row: 4;
$per-col: 3;
$total-width: ($width + 2 * $icon-margin) * 4;
$total-height: 10+ ($height * $per-col) + ($icon-margin * $per-col * 2);
$color: #fff;
$border: 1px solid $color;

html {
  box-sizing: border-box;
  font-size: 0; // for perfect fitting with spacing in my html
}
*,
*:before,
*:after {
  box-sizing: inherit;
  outline: none;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  background: #1f8a70;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.content-inner {
  width: $total-width;
  height: $total-height;
  position: relative;
  left: calc(-1 * $total-width / 2);
  top: calc(-1 * $total-height / 2);
}

.icon {
  margin: $icon-margin;
  display: inline-block;
  width: $width;
  height: $height;
  border: $border;
  cursor: pointer;
  #dropdown-1 {
    &.close {
      &::before,
      &::after {
        left: calc(-1 * $width / 4);
        width: $width;
      }
      &::before {
        transform: rotate(-45deg);
      }
      &::after {
        transform: rotate(45deg);
      }
    }
  }
  #dropdown-2 {
    &.close {
      &::before,
      &::after {
        left: calc(-1 * $width / 4);
        width: $width;
      }
    }
  }
  #dropdown-3 {
    &.close {
      &:before {
        transform: rotate(-45deg);
      }
      &:after {
        transform: rotate(45deg);
      }
    }
  }
  #dropdown-4 {
    &.close {
      &:before {
        left: 0;
        transform: rotate(45deg);
      }
      &:after {
        left: 0;
        transform: rotate(-45deg);
      }
    }
  }
}
$dd-height: calc($height / 7);
$dd-width: calc($width / 2);

.dropdown {
  position: relative;
  margin: calc($height / 2.2) calc($width / 4);

  transition: $transition;

  &:before,
  &:after {
    transition: $transition;
    content: " ";
    position: absolute;
    width: $dd-width;
    height: $dd-height;
    background: $color;
    border-radius: $dd-width;
  }

  &:before {
    left: calc(-1 * $dd-width / 2 * cos(45deg) + ($dd-height / 3));
    transform: rotate(45deg);
  }
  &:after {
    left: calc($dd-width / 2 * cos(45deg) - ($dd-height / 3));
    transform: rotate(-45deg);
  }
}

$mn-width: calc($width * 6 / 8);
$mn-height: calc($height / 7);

.menu {
  position: relative;
  background: $color;
  width: $mn-width;
  height: $mn-height;
  margin-top: calc($height * 3 / 7);
  margin-left: calc($width * 1 / 8);
  border-radius: $mn-width;
  transition: $transition;

  &:before,
  &:after {
    content: "";
    position: absolute;
    width: $mn-width;
    height: $mn-height;
    background: $color;
    border-radius: $mn-width;
    transition: $transition;
  }

  &:before {
    top: calc(-1 * $height * 2 / 7);
  }
  &:after {
    top: calc($height * 2 / 7);
  }
}
